<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span {
				background-color: #008000;
			}

			.box1 {
				width: 100px;
				height: 100px;
				background-color: red;
			}

			.s1 {
				/*内联元素设置宽和高无效*/
				width: 200px;
				height: 200px;

				/*
				可以水平方向的内边距
				水平方向会影响布局。
				*/
				padding-left: 100px;
				padding-right: 100px;

				/*
				垂直方向边距
				会覆盖下面的div
				垂直方向不会影响布局，但是会覆盖
				*/
				padding-top: 50px;
				padding-bottom: 50px;

				/*
				边框
				可以设置边框，但是垂直的边框不会影响布局。
				但是水平的布局会。
				*/
				border: 1px blue solid;

				/*
				水平外边距，印象布局
				*/
				margin-left: 100px;
				margin-right: 100px;
			}

			.s2 {
				/*
				水平方向的外边距是求和，不会重叠。
				垂直方向的才会重叠。
				*/
				margin-left: 100px;
				/*
				不支持垂直方向
				*/
				margin-top: 200px;
			}
		</style>
	</head>
	<body>
		<!-- 
		H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频3 54课
		这里注意看浏览器的body标签的默认样式。
		-->
		<span class="s1">我是一个span s1</span>
		<span class="s2">我是一个span s2</span>
		<span>我是一个span</span>
		<span>我是一个span</span>
		<div class="box1"></div>
	</body>
</html>
